React Hooks

FunctionalComponent<>に状態を持たせられるようにする関数

class componentの潜在的な問題をカバーする仕組みらしい

オブジェクト指向プログラミングに対する関数型プログラミング……という対比というわけでもないのか？

custom Hooksというのも作れる

Hookの種類

最近Reactを始めた人向けのReact Hooks入門を読んで書いたメモ

useState()

FunctionalComponent<>に保存領域を作る

要はproperty

使い方

const [x, setX] = useState<T>(initialValue);

initialValueから型推論できる場合は<T>不要

useState()はそのrenderingの回での値と、値を更新するための関数を入れた配列を返す

更新関数を使って値を更新する

/emoji/warning.icon更新のタイミングはrenderingの後。setXを実行した直後ではない

from CodePenを使ってReact.jsを学ぶ練習log#5fb6b84b1280f000001cb35a

更新関数の型はReact.Dispatch<React.SetStateAction<T>>

useMemo()

値の更新タイミングを制御できる

cache変数として使うことができる

useCallback()

useMemo()の関数版

少しだけ簡単に書ける

useEffect()

componentのrendering後に実行されるHook

JQueryを使ってDOMを直接操作したり、APIと通信したりするときに使う

副作用その他を実行できるという名目だが、よくわかっていないtakker.icon

2020-11-20 08:03:03 おそらく、外に何も返却せず中で処理を行うことから来ているんだと思う

逆に他のHooksは内部で変更処理を行うことができない

使い方

code:ts

useEffect(()=>{...},[]);

第2引数で更新タイミングを制御する

[]のときは一度しか実行しない

useLayoutEffect()

利用場面はないと思う

renderingをblockするので使用するときは注意

useRef()

useEffect()の参照版

DOM操作にしか使わない？

それ以外の用途がないとのこと

componentのmountの状態を取得するのに使える

React Hooks useRefでマウント時の処理を使い分ける - Qiita

React.useEffectで非同期処理をする場合の注意点2つ - Qiita

React HooksのuseEffectパターン集 - Qiita

useRef()でrefを受け取った後、useEffect()内で使う

ref.currentでそのComponentのDOMを操作できる

React.forwardRefを使うと、componentの外でもそのDOMを操作できるようになるが、安全性が落ちるのでなるべくやらないほうが良い

custom Hooks

userが自作できるHooks

注意点

実行する順番と回数は一意でなければならない

たぶん内部でlinked listを使っている都合だと思う

from React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた

あとで読む

公式の解説

フックの導入 – React

React Hooksを導入する利点、これによって解決する問題が説明されている

フック早わかり – React

簡単なtutorial

最近Reactを始めた人向けのReact Hooks入門

非公式の中では一番わかりやすそう

/icons/react.icon知らない人向けにも配慮して書いてある

/icons/react.iconそのものについては正真正銘のReactだけの不純物なしでReact入門で深く解説している

5分でわかるReact Hooks - Qiita

【超便利】React Hooksを使う３つのメリットと便利機能４選｜Playground発！アプリ開発会社の技術ブログ

#2020-11-27 21:36:38

#2020-11-23 19:00:40

#2020-11-20 08:03:34

#2020-11-20 03:29:08

#2020-11-12 16:22:56